<template>
	<view class="page">
		<view class="from_item" @click="goSelectUser">
			<view class="label">选择员工: {{ userName }}</view>
			<view class="right">
				<uni-icons
					class="icon"
					type="staff-filled"
					size="30"
				>
				</uni-icons>
			</view>
		</view>
		<view class="from_item" @click="goSelectProcedure">
			<view class="label">选择工序: {{ procedureName }}</view>
			<view class="right">
				<uni-icons
					class="icon"
					type="shop-filled"
					size="30"
				>
				</uni-icons>
			</view>
		</view>
		
		<view>
			<uni-search-bar
				v-model="searchForm.sfindinfo"
				placeholder="请输入搜索条件"
				@confirm="search"
				@cancel="cancel"
			></uni-search-bar>
			<view style="display: flex; width: 100%;">
				<view style="width: 120rpx; margin-left: auto;">
					<u-button type="primary" @click="selectAll">全选</u-button>
				</view>
			</view>
			<uni-grid class="gaid-box" :column="3" :showBorder="false">
				<uni-grid-item v-for="item in list" :key="item.id">
					<view
						class="grid-item"
						:class="selectList.includes(item.id) ? 'grid-item-act' : ''"
						@click="handClick(item)"
					>
						<view class="grid-item-one"> 扎号: {{ item.spackage_no }} </view>
						<view class="grid-item-one"> 尺码: {{ item.ssize_name }} </view>
						<view class="grid-item-one"> 颜色: {{ item.scolor_name }} </view>
						<view class="grid-item-one"> 件数: {{ item.iqty }} </view>
						<!-- <uni-number-box v-model="vModelValue" ></uni-number-box> -->
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		
		<view class="fixed-box">
		<button class="save" @click="save()" size="default">保存</button>
		</view>
	</view>
	
</template>

<script>
	import { pull } from "lodash";
	import fabricService from "@/api/auth/fabricService";
	export default {
		data() {
			return {
				searchForm: {
					mstId: '',
					sfindinfo: '',
					current: -1,
					size: -1
				},
				list: [],
				user: '',
				userName: '',
				procedureId: '',
				procedureName: '',
				orderNo: '',
				styleNo: '',
				selectList: []
			}
		},
		onShow() {
			uni.$on('dataFromChild', (data) => {
				this.user = data.map(item => item.semployee_id).join(',');
				this.userName = data.map(item => item.semployeename_cn).join(',');
			});
			uni.$on('procedureSelected', (data) => {
				this.procedureId = data.map(item => item.sProcedureID).join(',');
				this.procedureName = data.map(item => item.sProcedureName).join(',');
			});
		},
		onUnload() {
			uni.$off('dataFromChild');
			uni.$off('procedureSelected');
		},
		onLoad(query) {
			if (query.id) {
				this.searchForm.mstId = query.id
				this.getInfo();
			};
		},
		methods: {
			getInfo() {
				uni.showLoading({
					title: '加载中'
				});
				fabricService.getCutPakeageDetail(this.searchForm).then(res => {
					if(res.records.length > 0){
						this.orderNo = res.records[0].sorder_no
						this.styleNo = res.records[0].sstyle_no
					}
					this.list = res.records;
					uni.hideLoading();
				}).catch(error => {
					uni.hideLoading();
				})
			},
			handClick(item) {
				if (this.selectList.includes(item.id)) {
					pull(this.selectList, item.id);
				} else {
					this.selectList.push(item.id);
				}
			},
			// 全选方法
			selectAll() {
				let ids = this.list.map(item => item.id);
				this.selectList = ids;
			},	
			search() {
				this.selectList = [];
				this.getInfo();
			},
			cancel() {
				this.searchForm.sfindinfo = "";
			},
			goSelectUser() {
				uni.navigateTo({
					url: `/pages/subB/reportWork/selectUser`
				});
			},

			goSelectProcedure() {
				uni.navigateTo({
					url: `/pages/subB/reportWork/selectProcedure?orderNo=${this.orderNo}&styleNo=${this.styleNo}`
				});
			},
			// 保存
			save() {
				if (this.selectList.length === 0) {
					uni.showToast({
						title: '请选择扎包',
						duration: 2000,
						icon: "error"
					});
					return false;
				}
				const list = [];
				this.selectList.forEach(item => {
					const t = this.list.find(f => {
						return f.id === item
					})
					list.push(t);
				});
				const data = {
					user: this.user,
					list
				}
				fabricService.batchImportOut(data).then(res => {
					if (res !== 'ok') {
						uni.showToast({
							title: res,
							duration: 2000,
							icon: "error"
						});
					} else {
						uni.showToast({
							title: '成功',
							duration: 500,
							icon: "success"
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 500);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: rgb(242, 242, 242);
		padding-top: 20rpx;
	}
	.page {
		width: 710rpx;
		margin: 0 auto;
		border-radius: 2px;
		background-color: white;
		padding-bottom: 140rpx;
	}
	.from_item {
		min-height: 100rpx;
		padding: 0 20px;
		border-bottom: 10px solid rgb(242, 242, 242);
		display: flex;
		align-items: center;
	}
	.label {
		font-size: 16px;
		flex: 1;
		font-weight: bold;
	}
	.right {
		position: relative;
	}
	.right input {
		text-align: right;
		padding-right: 10px;
		position: relative;
		right: 60rpx;
		top: 4px;
		width: 300rpx;
	}
	.iqty {
		text-align: right;
		padding-right: 10px;
		position: relative;
		right: -20rpx;
		top: 4px;
		width: 300rpx;
		font-size: 30rpx;
	}
	.icon {
		position: absolute;
		right: -10px;
		top: -13px;
	}
	.save {
		margin-top: 10px;
		width: 96%;
		height: 80rpx;
		background: rgb(17, 17, 17);
		border-radius: 10rpx;
		color: white;
		line-height: 80rpx;
		font-size: 24rpx
	}
	.seq {
		max-width: 400rpx;
		float: right;
	}
	
	
	.grid-item {
		 box-shadow: 0 1px 4px #f9f9f9, 1px 1px 40px rgba(0,0,0,.06);
		 width: 90%;
		 height: 90%;
		 margin: auto;
		 border: 1px solid #dcdfe6;
		 border-radius: 10rpx;
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
		 font-size: 28rpx;
		 text {
			 margin-top: 10rpx;
		 }
		 .grid-item-one {
			padding-left: 10px;
		 }
	}
	.grid-item-act {
		border-color: #1977fb;
		color: #1977fb;
	}
	
	.fixed-box {
		position: fixed;
		background-color: white;
		height: 120rpx;
		width: 100%;
		bottom: 0;
		left: 0;
	}
</style>